取個好名字一直都不容易，每當有個新同事要進來時，還沒看到人先聽到名字總是會猜想外表呢~
名字說不定也算是第一印象的一種?

不過 CSS 的命名就不是這麼難的事情了，只要有幾個大方向即可。

首先先介紹寫法吧，同樣是命名中的一環。

因為 CSS 名字是顯示在螢幕上的，不同於人名是用聽見的。所以名字怎麼呈現也算取名的技巧之一。

駝峰式寫法

分為大駝峰與小駝峰。
差異在於，
大駝峰為首字大寫，e.g. MyName
小駝峰為首字小寫，e.g. myName

筆者喜歡用小駝峰，沒什麼原因，主要就是習慣吧...

有人可能會有疑問，為什麼不用 - 或 _ 符號呢?

主要是因為在開發網頁時並不會只有一個區塊。一個大區塊中也會包含著小區塊。

我會用 - 或 _ 來表示大區塊下的其他東西。

<div class="box">
    <p class="box-content">小區塊</p>
</div>
<div class="boxTwo"></div>

不過 CSS-Guidelines 的作者命名方式就是用 - 符號。

至於哪個比較好，習慣就好，根本沒差，一致都用同個方法比較重要。

知道名字寫法，那該如何取名字呢?

有兩個方式，自己考慮如何使用，最主要是用在何處。

語意化命名

優點在於專屬、直覺、易於維護。

當你看到 .bookCase 及 .news 時應該就能猜到這是個書櫃及消息的 class 吧@@!

他提供你專屬於這個區塊的專用 class，也讓你在未來維護時提供你直覺、清晰的想法，不須回憶這個到底是啥。

當然依照 class 的特性，class 當然能重複使用，但這樣就失去語意化的優勢了。總不會命名 bookCase 然後放在 videoCabinet 的區塊吧...

語意化命名的缺點就如上面所述，過於專屬了，明明同性質的東西，卻不能重複使用。

所以就跑出第二個方式

非語意化命名(抽象命名)

這個不是正式的名字，只是我稱呼這種命名方式為抽象命名而已，比較好記@@

這個方法改善了語意化命名的缺點，但同時因為是抽象的方式，所以在命名時比較不直覺，且在開發前就需要先規劃好網頁的架構，規劃好後才比較好進行這類的命名方式。

簡單來說，像上面舉例的 .bookCase 與 .videoCabinet，兩者在開發上結構類似的話，就能用 .list 來取代。

常用來舉例的顏色，也可以用 primary、other 或 another 來命名，減少使用直觀的 red、blue。

註：上面有提到，"在開發前就需要先規劃好網頁的架構"。這有點像在打草稿，在開發中才不會突然新增其他東西。

明天則是 BEM 的設計模式教學，可能有人會好奇應該跟前幾章的 SMACSS 或 OOCSS 連接再一起才是阿?這樣根本破壞結構!!
因為我習慣將大區塊底下的小區塊用 - 符號區分，但是沒介紹過我的命名方式又用直接講 BEM 的架構分類又很奇怪，所以就中間先插入這章了。原來一開始順序就錯了
上面廢話一堆，盡請期待明天的教學吧! 掰~